<style scoped>
</style>
<!--  -->
<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline" @submit.native.prevent>
      <el-form-item label="系统">
        <el-select v-model="formInline.systemId" placeholder="请选择系统" size="small">
          <el-option v-for="(item, index) in systemFilter" :key="index" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="分类" v-loading="categoryLoading">
        <el-select :disabled="categoryDisabled" v-model="formInline.categoryId" placeholder="请选择系统分类" size="small">
          <el-option label="全部" :value="-1"></el-option>
          <el-option label="未定义" :value="0"></el-option>
          <template v-for="item in categories[0]">
            <el-option :key="item.id" :label="item.name" :value="item.id"></el-option>
            <template v-for="ite in categories[item.id]">
              <el-option style="padding-left:36px;" :key="ite.id" :label="ite.name" :value="ite.id"></el-option>
              <template v-for="it in categories[ite.id]">
                <el-option style="padding-left: 54px;" :key="it.id" :label="it.name" :value="it.id"></el-option>
              </template>
            </template>
          </template>
        </el-select>
      </el-form-item>

      <el-form-item label="内容名称">
        <el-input v-model="formInline.name" placeholder="输入内容名称" size="small" maxlength="100" :disabled="nameDisabled">
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchSystemItem" size="small">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table v-if="tableData !== false" :data="tableData" style="width: 100%" v-loading="loading">
      <el-table-column prop="name" label="内容名称">
      </el-table-column>
      <el-table-column prop="categoryName" label="分类名称">
      </el-table-column>
      <el-table-column label="操作" width="280">
        <template slot-scope="scope">
          <el-button @click="editorSeoCategory(scope.row.id)" type="text" size="small">编辑内容SEO信息</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="height:12px;"></div>
    <el-row type="flex" justify="end">
      <PageTurning ref="pageTurning" :changePage="changePage" :page="pagination" />
    </el-row>
    <SeoItemDialog ref="seoItemDialog" />
  </div>
</template>

<script>
import PageTurning from '@/components/common/PageTurning.vue'
import SeoItemDialog from '@/components/main/user/siteseo/common/SeoItemDialog.vue'
export default {
  created () {
    // 获取所有的系统
    this.$post('/system/infos', null).then(response => {
      if (response && response.length > 0) {
        this.system = response
      } else {
        this.system = []
      }
    })
  },
  data () {
    return {
      system: [],
      categories: [],
      formInline: {
        systemId: '',
        categoryId: -1,
        name: ''
      },
      // 显示的数据列表
      tableData: false,
      loading: false,
      // 当前列表systemId
      tableCurSystemId: 0,
      // 记录当前的获取的分类的systemId
      currentSystemId: 0,
      // 分类是否在加载
      categoryLoading: false,
      // 分类是否不可选
      categoryDisabled: true,
      // 名称一开始不可输入
      nameDisabled: true,
      // 分页
      pagination: {
        // 当前页
        page: 1,
        // 一页大小
        size: 12,
        // 总数
        total: 0
      }
    }
  },
  watch: {
    formInline: {
      handler (newValue) {
        if (newValue.systemId !== this.currentSystemId && parseInt(newValue.systemId) > 0) {
          this.formInline.name = ''
          if (this.nameDisabled) {
            this.nameDisabled = false
          }
          this.currentSystemId = parseInt(newValue.systemId)
          // 如果当前的systemId 是不带分类的则不进行查询获取数据
          let system = this.system.find(element => {
            return parseInt(element.id) === this.currentSystemId
          })
          if (!system) {
            return
          }
          if ([2, 4].indexOf(parseInt(system.systemTypeId)) !== -1) {
            this.categoryDisabled = true
            this.categories = []
            this.formInline.categoryId = -1
            return
          } else {
            this.categoryDisabled = false
          }
          // 获取分类
          this.categoryLoading = true
          this.$post('/category/table-data-infos-by-system-id', { systemId: this.currentSystemId }).then((resoponse) => {
            if (resoponse.categories) {
              this.categories = resoponse.categories
            } else {
              this.categories = []
            }
            this.categoryLoading = false
          })
        }
      },
      deep: true
    }
  },
  computed: {
    systemFilter () {
      return this.system.filter(item => [1, 2, 3, 4].indexOf(item.systemTypeId) !== -1)
    }
  },
  methods: {
    searchSystemItem (bool) {
      // 获取数据
      if (bool !== false) {
        this.pagination.page = 1
      }
      let param = Object.assign({}, this.formInline, this.pagination)
      if (isNaN(parseInt(param.systemId)) || parseInt(param.systemId) < 1) {
        return
      }
      // 获取系统的列表数据
      this.loading = true
      this.$jpost('/system/get-item-info', param).then(response => {
        if (response) {
          if (response.total) {
            this.pagination.total = response.total
          }
        }
        if (response.list && response.list.length > 0) {
          this.tableData = initTableData(response.list, this.system.find(element => {
            return parseInt(this.formInline.systemId) === parseInt(element.id)
          }))
          this.tableCurSystemId = this.formInline.systemId
        } else {
          this.tableData = []
        }
        this.loading = false
      })
    },
    // 改变分页
    changePage () {
      this.searchSystemItem(false)
    },
    // 编辑SEO
    editorSeoCategory (id) {
      this.$refs['seoItemDialog'].show(this.tableCurSystemId, id)
    }
  },
  components: {
    PageTurning,
    SeoItemDialog
  }
}

// 初始化列表显示数
function initTableData (list, system) {
  let result = []
  if (parseInt(system.systemTypeId) === 1) {
    // 文章带分类数据
    for (let i in list) {
      let item = list[i]
      let id = item.articleId
      let name = item.articleTitle
      let categoryName = item.categoryName ? item.categoryName : '未分类'
      result.push({
        id, name, categoryName
      })
    }
  } else if (parseInt(system.systemTypeId) === 2) {
    // 文章不带带分类数据
    for (let i in list) {
      let item = list[i]
      let id = item.articleId
      let name = item.articleTitle
      let categoryName = '无分类系统'
      result.push({
        id, name, categoryName
      })
    }
  } else if (parseInt(system.systemTypeId) === 3) {
    for (let i in list) {
      let item = list[i]
      let id = item.id
      let name = item.title
      let categoryName = ''
      if (item.listCageData && item.listCageData.length > 0) {
        let time = 0
        for (let j in item.listCageData) {
          let cateData = item.listCageData[j]
          if (time === 0) {
            time++
            categoryName += cateData.name
          } else {
            categoryName += '、' + cateData.name
          }
        }
      } else {
        categoryName = '未分类'
      }
      result.push({
        id, name, categoryName
      })
    }
  }
  return result
}

</script>
